<template>
	<div>
		<div @tap="back" class="back">←</div>
		<div :style="{backgroundImage:'url('+detail.backthumb+')'}" style="padding-bottom: 100px;padding-top: 60px;">
			<div class="list">
				<uv-parse :content="detail.content"></uv-parse>
				<ad unit-id="adunit-8a166daae15abc5e" ad-type="video" ad-theme="black"></ad>
				<h5 class="moretitle">查看更多</h5>
				<view v-for="(item,i) in data">
					<card v-for="(Item, index) in item.newslist" :key="index" :newstitle="Item.title"
						:fixedtime="Item.fixedtime" :newsthumb="Item.thumb" :newscode="Item.ano"
						@toNewsDetail="clickToDetail(Item.ano,Item.type)">
					</card>
				</view>
			</div>
			<div class="titletext">
				<button open-type='share' class='sharebutton radius shadow-blur'>
					<div class="shareview">分享给好友</div>
				</button>
				<button open-type='share' class='sharequn radius shadow-blur'>
					<div class="shareview">分享微信群</div>
				</button>
			</div>
			<div class="more" :class="[isplaying?'playing':'']" @click="stopmusic">
				<image
					src="">
				</image>
			</div>
		</div>
		<div class="dialog" v-if="dialog">
			<div class="center">
				<i class="close" @click="closeDialog">×</i>
				<img src="/static/img/share.jpg" alt="" mode='widthFix'>
				<h5>如果觉得好，就分享给更多人吧！</h5>
				<button open-type='share' class='sharequn radius shadow-blur'>
					<div class="shareview">继续分享</div>
				</button>
			</div>
		</div>
	</div>
</template>

<script>
	// 在页面中定义插屏广告
	let interstitialAd = null;
	// *** 发版前务必关闭此模式 ***
	import card from '@/components/card/card2.vue';
	export default {
		components: {
			card
		},
		data() {
			return {
				data: [],
				detail: {
					content: ''
				},
				isplaying: true,
				dialog: false,//分享
				from: 'list',
				musicsrc: '',
				innerAudioContext: [],
				ano: '',
				imgUrl: '',
				canvasshow: false,
				timeslotavatar: [],
				appheight: '',
				autoplay: false,
				interval: 0,
				duration: 600,
				cur: 0,
				nickname: '朋友',
				avatar: '',
				buttontext: '定制自己的个性祝福'
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			const that = this;
			this.getArticleDetail(options.ano);
			this.getList();
			uni.getSystemInfo({
				success: (res) => {
					this.appheight = res.windowHeight;
				}
			})
			// 在页面onLoad回调事件中创建插屏广告实例
			if (wx.createInterstitialAd) {
				interstitialAd = wx.createInterstitialAd({
					adUnitId: that.$apis.adUnitIdDetail
				})
			}
		},
		onShow() {
			if (interstitialAd && !this.$apis.testMode) {
				interstitialAd.show().catch((err) => {
					console.error(err)
				})
			}
		},
		onUnload: function() {
			//离开页面是停止播放音乐
			this.innerAudioContext.stop();
		},
		methods: {
			getList() {
				let data = {
					'page': 1,
					'pageize': 6,
				};
				var that = this;
				this.$apis.getIndexlist(data).then(res => {
					that.data = res
					console.log('that.data', that.data);
				}).catch(() => {

				});
			},
			clickToDetail: function(index, type) {
				uni.navigateTo({
					url: '/pages/news/index?ano=' + index
				})
			},
			joinGroup() {
				uni.navigateTo({
					url: '/pages/group/index'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getArticleDetail(id) {
				const that = this;
				let data = {
					'ano': id
				};
				this.$apis.getArticleDetail(data).then(res => {
					// this.$apis.getCardArticle(data).then(res => {
					if (res.detail) {
						that.detail = res.detail;
						that.ano = res.detail.ano;
						that.imgUrl = res.detail.floatthumb;
						that.timeslotavatar = res.timeslotavatar
						if (res.detail.floatthumb) {
							that.canvasshow = true;
							this.createStar(this.imgUrl)
						}
						// if (!this.$apis.testMode) {
							this.startmusic(res.detail.music);
						// }
					} else {
						setTimeout(function() {
							wx.reLaunch({
								url: '/pages/index/index'
							})
						}, 500)
					}
				});
			},
			change(e) {
				let thisPage = e.detail.current;
				this.cur = thisPage;
				console.log(this.cur);
			},

			getUserInfo() {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res)

					}
				})
			},
			startmusic(music) {
				let that = this;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = music;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			},

			stopmusic() {
				if (this.isplaying) {
					this.innerAudioContext.pause();
					this.isplaying = false;
				} else {
					this.innerAudioContext.play();
					this.isplaying = true;
				}
			},

			createStar(imgUrl) {
				// #ifdef MP-WEIXIN
				let starImage = ''
				uni.getImageInfo({
					src: imgUrl,
					success: res => {
						starImage = res.path
					}
				})
				// #endif
				let {
					requestAnimationFrame
				} = this

				function Star(x, y, radius) {
					this.x = x
					this.y = y
					this.sx = 0
					this.sy = 0
					this.deg = 0
					this.radius = radius
					this.ax = Math.random() < 0.5 ? 0.01 : -0.01
				}
				Star.prototype.update = function() {
					const deltaDeg = Math.random() * 0.6 + 0.2
					this.sx += this.ax
					if (this.sx >= SPEED_LIMIT_X || this.sx <= -SPEED_LIMIT_X) {
						this.ax *= -1
					}
					if (this.sy < SPEED_LIMIT_Y) {
						this.sy += G
					}
					this.deg += deltaDeg
					this.x += this.sx
					this.y += this.sy
				}
				Star.prototype.draw = function() {
					const {
						radius
					} = this
					ctx.save()
					ctx.translate(this.x, this.y)
					ctx.rotate((this.deg * Math.PI) / 180)
					// #ifdef MP-WEIXIN
					ctx.drawImage(starImage, -radius, -radius * 1.8, radius * 5, radius * 5)
					// #endif
					// #ifdef MP-ALIPAY
					ctx.drawImage(imgUrl, -radius, -radius * 1.8, radius * 5, radius * 5)
					// #endif
					ctx.restore()
				}
				const stars = []
				// 下落的加速度
				const G = 5
				// 速度上限，避免速度过快
				const SPEED_LIMIT_X = 1
				const SPEED_LIMIT_Y = 1
				const W = uni.getSystemInfoSync().windowWidth
				const H = uni.getSystemInfoSync().windowHeight - 100
				const starCount = 100 // 星星总的数量
				let starNum = 0 // 隔多少个设定的毫秒数生成一个星星
				const deltaTime = 2 // 每次增加的星星数量
				const ctx = uni.createCanvasContext('myCanvas')
				let starAllBottom = 0 // 到达底部的星星数量
				let trueStarCount = 0 // 真正生成的星星数量
				const starLoop = () => {
					requestAnimationFrame = setTimeout(() => {
						starLoop()
					}, 1000 / 60)
					ctx.clearRect(0, 0, W, H)
					starNum += deltaTime
					if (starNum > starCount && trueStarCount < starCount) {
						stars.push(new Star(Math.random() * W, 0, Math.random() * 5 + 5))
						starNum %= starCount
						trueStarCount += 1
					}
					//if (isEmpty(stars)) return
					if (stars.length === 0)
						return
					stars.forEach((s, i) => {
						//重复绘制
						s.update()
						s.draw()
						if (s.y >= H) {
							//大于屏幕高度的就从数组里去掉
							starAllBottom += 1
							stars.splice(i, 1)
							if (starAllBottom === starCount) {
								clearTimeout(requestAnimationFrame)

							}
						}
					})
					ctx.draw()
				}
				starLoop()
			},
			showShreDialog() {
				this.dialog = true
			},
			closeDialog(){
				this.dialog = false
			}
		},
		onShareAppMessage: function() {
			this.showShreDialog();
			return {
				title: this.detail.sharetitle,
				path: '/pages/index/index?ano=' + this.detail.ano + '&from=share&t=' + this.fixedtime,
				imageUrl: this.detail.sharethumb,
				success: function(res) {
					// 转发成功
				},
			}
		},
	}
</script>

<style scoped>
	@import "index.css";
	@import "@/static/css/animate.min.css";
</style>